<template>
    <div>
        <el-row>
            <el-col :span="2">
                付款方式：
            </el-col>
            <el-col :span="4">
                预付
            </el-col>
            <el-col :span="2">
                余额：
            </el-col>
            <el-col :span="4">
                12.42
            </el-col>
            <el-button type="primary" @click="dialogVisible = true">收取/支付塔扬科技</el-button>
            <Pay :dialogVisible="dialogVisible" @dialogColse="dialogColse"/>
        </el-row>
        <el-tabs @tab-click="handleClick" v-model="activeName">
            <el-tab-pane v-for="(tab, index) in tabData" :label="tab.label" :name="tab.name" :key="index"></el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    import Pay from '@/base/pay/pay'
   export default {
        data() {
            return {
                dialogVisible: false,
                tabData: [{
                        label: '账单记录',
                        name: 'agent_order_statistics'
                    },
                    {
                        label: '收付款记录',
                        name: 'order_incomes'
                    }
                ],
                activeName: 'agent_order_statistics'
            }
        },
        created() {
            this.activeName = this.$route.name
            if(this.$route.fullPath.includes('order_incomes')) {
                this.activeName = 'order_incomes'
            }
        },
        methods: {
            handleClick(tab) {
                var path = '/agent_profit/' + this.$route.params.id9+ '/agent_order_statistics/' + tab.name
                if (tab.name === 'agent_order_statistics') {
                    path = '/agent_profit/' + this.$route.params.id9 + '/agent_order_statistics';
                }
                this.$router.push({
                    path: path
                })
            },
            dialogColse() {
                this.dialogVisible = false
            }

        },
        watch: {
            $route: {
                handler: function(to) {
                    this.tabData.forEach((tab) => {
                        if (tab.name == to.name) {
                            this.activeName = to.name
                        }
                    });
                },
                // 深度观察监听
                deep: true
            }
        },
        components: {
            Pay
        }
    }
</script>

<style scoped lang="scss">
    .el-row {
        position: relative;
        .el-col {
            font-size: 14px;
            padding: 15px 0px;
        }
        .el-col:nth-of-type(2n + 1) {
            font-weight: bold;
            text-align: left;
        }
        .el-col:nth-of-type(2n) {
            padding-left: 15px;
        }
    }

    .el-button{
        position: absolute;
        top: 8px;
        right: 0px;
    }
</style>